$(function () {
    // 1.1 获取裁剪区域的 DOM 元素
    const $image = $('#image')

    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }

    // 1.3 创建裁剪区域
    $image.cropper(options)


    //为选择文件的按钮绑定点击事件
    $('#btnChooseImg').on('click', function () {
        $('#file').click()
    })

    //监听文件选择框的change事件
    $('#file').on('change', function (e) {
        const files = e.target.files
        if (files.length === 0) {
            return
        }
        //注意不能直接将文件作为img标签的src属性
        //img的src属性,只接收图片的存放地址
        const imgURL = URL.createObjectURL(files[0])
        //1,销毁旧的裁剪区域
        $image.cropper('destroy')
        //2,为img标签设置新的src属性值
        $image.attr('src', imgURL)
        //3,重新初始化图片的裁剪区域
        $image.cropper(options)
    })
    //为上传头像的按钮绑定点击事件
    $('#btnUploadImg').on('click', function () {
        //1,获取到base64格式的图片(裁剪结果)
        const base64Img = $image.cropper('getCroppedCanvas', {
            width: 100,
            height: 100
        })
            .toDataURL('image/png')

        //2,发起请求,更换用户的头像
        $.post('/my/update/avatar', { avatar: base64Img }, function (res) {
            if (res.status === 0) {
                //头像上传成功
                //需要刷新窗口中的头像
                window.parent.getUserInfo()
            }
            layer.msg(res.message)
        })
    })

})